import { useState, useEffect } from 'react';
import { useWaterIntake } from '@/contexts/WaterIntakeContext';

export const GoalSettingModal = () => {
  const { showGoalModal, setShowGoalModal, dailyGoal, setDailyGoal } = useWaterIntake();
  const [goalInput, setGoalInput] = useState<string>(dailyGoal.toString());

  // 当模态框显示时更新输入值
  useEffect(() => {
    setGoalInput(dailyGoal.toString());
  }, [showGoalModal, dailyGoal]);

  // 处理表单提交
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const parsedGoal = parseInt(goalInput, 10);
    
    if (isNaN(parsedGoal) || parsedGoal <= 0) {
      alert('请输入有效的目标水量');
      return;
    }
    
    setDailyGoal(parsedGoal);
    setShowGoalModal(false);
  };

  if (!showGoalModal) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-2xl w-full max-w-md mx-auto overflow-hidden shadow-2xl animate-in fade-in zoom-in-95 duration-300">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold text-gray-800">设置每日目标</h2>
            <button 
              onClick={() => setShowGoalModal(false)}
              className="text-gray-400 hover:text-gray-600 transition-colors"
            >
              <i class="fa-solid fa-times"></i>
            </button>
          </div>
          
          <form onSubmit={handleSubmit}>
            <div className="mb-8">
              <label className="block text-sm font-medium text-gray-700 mb-2">每日喝水目标 (ml)</label>
              <div className="relative">
                <input
                  type="number"
                  value={goalInput}
                  onChange={(e) => setGoalInput(e.target.value)}
                  min="500"
                  max="5000"
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-lg"
                  required
                />
                <span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">ml</span>
              </div>
              <p className="text-sm text-gray-500 mt-2">推荐每日饮水量: 1500-2500ml</p>
            </div>
            
            <div className="grid grid-cols-2 gap-4">
              <button
                type="button"
                onClick={() => setGoalInput('1500')}
                className="py-3 px-4 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors"
              >
                1500ml
              </button>
              <button
                type="button"
                onClick={() => setGoalInput('2000')}
                className="py-3 px-4 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors"
              >
                2000ml
              </button>
              <button
                type="button"
                onClick={() => setGoalInput('2500')}
                className="py-3 px-4 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors"
              >
                2500ml
              </button>
              <button
                type="button"
                onClick={() => setGoalInput('3000')}
                className="py-3 px-4 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors"
              >
                3000ml
              </button>
            </div>
            
            <button
              type="submit"
              className="w-full mt-6 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-xl transition-colors duration-300"
            >
              保存目标
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};